<template>
	<view class="page">
		<view class="top_swiper">
			<u-swiper :list="bannerList" mode="dot" :height="420"></u-swiper>
		</view>
		<view class="pdlr home-card">
			<view class="bgwhite cardview pdtb univ-card" style="overflow: visible;">
				<view class="fl-cc posi-re">
					<view class="avatar-con mgb10">
						<image class="avatar" mode="aspectFill"></image>
					</view>
					<view class="tit mgb10">哈尔滨工业大学</view>
					<view class="fl mgb10">
						<view class="fl stag">
							<view class="iconfont icon-wdsc" style="font-size: 16px;"></view>
							<text class="mgl5">985工程优势学科创新平台</text>
						</view>
					</view>
				</view>
				<view class="univ-info pdlr">
					<view class="fl-rsb">
						<view class="fl mgb10">
							<text class="form-tit">建校时间：</text>
							<text class="form-value">2025-09-01</text>
						</view>
						<view class="fl mgb10">
							<text class="form-tit">学校代码：</text>
							<text class="form-value">2025-09-01</text>
						</view>
					</view>
					<view class="fl-c">
						<text class="form-tit">学校简介：</text>
						<view class="form-value text-wrap">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。</view>
					</view>
				</view>
			</view>
			<view class="pdt pdb10">
				<view class="fl-rsb">
					<view class="title">打卡地点</view>
					<view class="scolor" @click="isMapView = !isMapView">
						<text>切换{{ isMapView ? "列表" : "地图" }}</text>
					</view>
				</view>
			</view>
			<view v-if="isMapView">
				<siteMap :parking-spots="[
  { id: 1, number: 32, latitude: 34.341317, longitude: 108.93965 },
  { id: 2, number: 3, latitude: 34.342534, longitude: 108.941084 },
  { id: 3, number: 0, latitude: 34.341176, longitude: 108.940518 }
]" @update="mapUpdate" @onClickMarker="onClickMarker" />
			</view>
			<view v-else>
				<view v-for="(item, index) in serviceList" :key="index" class="">
					<siteCard :item="item" @goDetail="goDetail" :isSite="false" />
				</view>
				<view class="w100 mgtb10" @click="goList">
					<uni-load-more status="more" showText="查看更多"></uni-load-more>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue';
	import snow from "../../static/images/snow.jpg"
	import water from "../../static/images/water.jpg"
	import autumn from "../../static/images/autumn.jpg"
	import router from "@/ya/router/index.js";
	import siteMap from "@/components/siteMap.vue";
	import siteCard from "@/components/siteCard.vue";
	const isMapView = ref(false);
	const bannerList = ref([{
			image: autumn
		},
		{
			image: water
		},
		{
			image: snow
		}
	]);
	const serviceList = ref([{
		title: '牛肉面(XXX店)',
		subTitle: '精选牛肉，鲜嫩美味',
		imgUrl: '/static/images/autumn.jpg',
		distance: '0.55'
	}]);
	const navto = (path) => {
		router.go(path);
	};
	const goDetail = (e) => {
		router.go(`/pages/university/detail?id=${e}`)
	};
	const goList = (e) => {
		router.go(`/pages/university/list`)
	};
</script>

<style scoped lang="scss">
	.top_swiper {
		height: 420rpx;
		position: relative;

		.notice {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			left: 20rpx;
			z-index: 999999;
		}
	}

	.univ-card {
		padding-top: 50px;
	}

	.home-card {
		position: absolute;
		width: 100%;
		z-index: 2;
		top: 200px;
	}

	.avatar-con {
		position: absolute;
		z-index: 6;
		top: -90px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>